<template>
    <header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" :ellipsis="false" mode="horizontal"
            @select="handleSelect">

            <el-menu-item index="-1">
                <a>
                    <!-- <img style="height:36px; vertical-align:middle" :src="vite_url + '/storage/' + settings.logo_chang.src" alt=""> -->
                    <img style="height:54px; vertical-align:middle" :src="vite_url + '/storage/' + settings.logo.src + '?v=1'" alt="">
                </a>

            </el-menu-item>
            <div class="flex-grow" />

            <template v-for="(item, index) in navList">
                <el-menu-item v-if="item.children.length == 0" :key="index" :index="item.id">
                    <a :href="item.link">
                        {{ item.title }}
                    </a>
                </el-menu-item>
                <el-sub-menu v-else  :index="item.id">
                    <template #title>{{ item.title }}</template>
                    <el-menu-item v-for="(cld,cldIndex) in item.children"
                     :key="cldIndex" :index="item.id+'-'+cld.id">
                     
                     <a :href="cld.link">
                        {{ cld.title }}
                    </a>
                    </el-menu-item>
                    
                </el-sub-menu>
            </template>


            <!-- <el-menu-item index="2">关于我们</el-menu-item>
            <el-menu-item index="3">色谱产品</el-menu-item>
            <el-menu-item index="4">耗材产品</el-menu-item>
            <el-menu-item index="5">新闻资讯</el-menu-item>
            <el-menu-item index="6">应用支持</el-menu-item>
            <el-menu-item index="7">客户服务</el-menu-item>
            <el-menu-item index="8">联系我们</el-menu-item> -->

        </el-menu>
    </header>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios';

const activeIndex = ref()
const handleSelect = () => {

    activeIndex.value = -2;
}

const vite_url: string = window.VITE_URL
const navList: any = ref<Array<object>>()
const settings: any = ref<object>({
    logo: {
        src: ''
    },
    logo_fang: {
        src: ''
    },
    logo_chang: {
        src: ''
    }

})
const get_nav_list = () => {


    const url = vite_url + '/cms/nav';

    // console.log(url,data)
    axios.get(url).then((res: any) => {

        navList.value = res.data;

    });

}
get_nav_list();


const get_setting = () => {


    const url = vite_url + '/yyjk/setting';

    // console.log(url,data)
    axios.get(url).then((res: any) => {

        settings.value = res.data


    });

}
get_setting();
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
}

header{
    height:60px;
}
.el-menu-demo{
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
}
</style>